<template>
	<view :data-theme="theme" class="container">
		<!-- 待报名活动 -->
		<view class="card">
			<view class="header-top">
				<view style="font-size: 30rpx;font-weight: bold;letter-spacing: 1rpx;">
					待报名活动
				</view>
				<view style="color: #999;align-items: center;display: flex;" @click="goCheckActive">
					查看全部活动<uni-icons type="forward" size="15" color="#5b5b5b"></uni-icons>
				</view>
			</view>
			<view class="content-text">
				<view>
					<scroll-view scroll-x="true" :style="{ 'padding-bottom':'20rpx' }"
						style="width: 100%; overflow: hidden;">
						<active-pending-page :acticityData="acticityData"
							@goActiveRegistration="goActiveRegistration"></active-pending-page>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 已报名活动 -->
		<view class="card">
			<view class="header-top">
				<view style="font-size: 30rpx;font-weight: bold;letter-spacing: 1rpx;">
					已报名活动
				</view>
				<view style="color: #999;align-items: center;display: flex;" @click="goPriceAdjust">
					调价建议<uni-icons type="forward" size="15" color="#5b5b5b"></uni-icons>
				</view>
			</view>
			<view class="content-text">
				<!-- <u-tabs @click="tabChangeClick" :list="tabList" :scrollable="true" :lineWidth="30" :lineColor="bgColor"
					:current="tabIndex" :activeStyle="{ color: '#000'}" :inactiveStyle="{color:'#4c4d51'}"></u-tabs> -->
				<uni-segmented-control :current="currentInd" :values="tabValue" inActiveColor="#000"
					:style-type="styleType" @clickItem="tabChangeClick" :active-color="bgColor" />
				<view style="margin-top: 16rpx;">
					<scroll-view scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
						style="height: 100%; overflow: hidden;" @scrolltolower="scrolltolowerFn">
						<taset-fresh-page :bgColor="bgColor" :tabIndex="tabIndex" :ongoingActivityList="propsData"
							@toActiveDetails="toActiveDetails" @openDataPopup="openDataPopup"
							@changeActive="changeActive" @addProducts="addProducts"></taset-fresh-page>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<tui-drawer mode="bottom" :visible="showUpDatePopup" @close="closeComuleDate">
			<view class="ensure">
				<view class="title"><text @click="closeComuleDate" class="iconfont icon-guanbi5"></text>活动商品
				</view>
				<uni-segmented-control :current="drawerInd" :values="items" inActiveColor="#000" :style-type="styleType"
					@clickItem="onClickItem" :active-color="bgColor" />
				<view class="content-item">
					<view v-if="drawerInd === 0">
						<view class="content-text">
							<view class="tab-view">
								<scroll-view class="scroll-view" scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
									style="overflow: hidden;">
									<detail-product-page class="swiper-page" :currentInd="drawerInd" :bgColor="bgColor"
										:tab="tabs" ref="tabs" :ongoingProductList="porductList"
										:activityCategory="activityCategory"
										@toDetails="toDetails"></detail-product-page>
								</scroll-view>
							</view>
						</view>
					</view>
					<view v-if="drawerInd === 1">
						<view class="content-text">
							<view class="tab-view">
								<scroll-view class="scroll-view" scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
									style="overflow: hidden;">
									<detail-product-page class="swiper-page" :currentInd="drawerInd" :bgColor="bgColor"
										:tab="tabs" ref="tabs" :ongoingProductList="porductList"
										:activityCategory="activityCategory"
										@toDetails="toDetails"></detail-product-page>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>

				<view style="height: 50px;"></view>
			</view>
		</tui-drawer>

		<!-- 水印容器，初始状态下隐藏 -->
		<!-- #ifdef APP-PLUS -->
		<view class="watermark">
			<canvas v-if="showWatermark" canvas-id="myCanvas1" class="watermark-canvas"
				style='width:100%;height:100%;'></canvas>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		setThemeColor
	} from "../../../utils/setTheme";
	let app = getApp();
	import {
		getActivityListAPi,
		getRegistrationAPi
	} from "@/api/marketing.js";
	import tasetFreshPage from "../components/taset-fresh-page.vue";
	import activePendingPage from "./components/active-pending-page.vue";
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import detailProductPage from '../components/detail-product-page.vue';
	export default {
		components: {
			tasetFreshPage,
			activePendingPage,
			tuiDrawer,
			detailProductPage
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				loadMoreStatus: 'noMore', //加载更多
				// tabList: [{
				// 	name: '活动中/未开始',
				// 	type: 1
				// }, {
				// 	name: '已结束',
				// 	type: 2
				// }],
				activityCategory: 2, //1、爆品尝鲜价 2、超级满减 3、新客爆品 4、秒杀 5、店铺尝鲜价 6、降价促销 7、店铺满减 8、店铺满赠
				acticityData: [],
				ongoingActivityList: [], //已报名未结束活动
				closedActivityList: [], //已结束
				propsData: [],
				tabValue: ['活动中/未开始', '已结束/未开启'],
				tabIndex: 0,
				showUpDatePopup: false,
				addCheckData: {},
				addCheckboxList: [],
				// ------------标签卡-------
				items: ['活动中', '未生效'],
				currentInd: 0,
				styleType: 'text',
				tabs: {},
				drawerInd: 0,
				// --------------商品弹窗列表-------
				ongoingProductList: [],
				closedProductList: [],
				porductList: [],
				activityId: '', //活动ID
				showWatermark: false,
				canvasId: 'watermarkCanvas',
				watermarkInterval: null
			}
		},
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			console.log(options)
			this.activityCategory = Number(options.activityCategory);
			this.drowsyUserinfo();
			if (options.activityCategory == 2) {
				uni.setNavigationBarTitle({
					title: '超级减满'
				});
			} if(options.activityCategory == 3){
				uni.setNavigationBarTitle({
					title: '新客爆品'
				});
			}if(options.activityCategory == 5){
				uni.setNavigationBarTitle({
					title: '店铺尝鲜'
				});
			}
		},
		created() {
			this.getActivityList()
		},
		mounted() {
			this.drowsyUserinfo(); 
			// #ifdef MP
			uni.onUserCaptureScreen(() => {
				console.log('用户截屏了');
				this.showWatermark = true;
				this.$nextTick(() => {
					this.drowsyUserinfo();
				});
				
				// 在一段时间后隐藏水印
				setTimeout(() => {
					this.showWatermark = false;
					this.clearWatermark();
				}, 1000); // 1秒后移除水印
			});
			// #endif
		},
		methods: {
			drowsyUserinfo() {
				// var userInfo = wx.getStorageSync('userInfo');
				// var name_xx = userInfo.username || userInfo.nickName;
				var name_xx = "小王";
				var ctx = uni.createCanvasContext("myCanvas1");
				console.log(ctx)
				ctx.rotate(45 * Math.PI / 180); //设置文字的旋转角度，角度为45°；

				//对斜对角线以左部分进行文字的填充
				for (let j = 1; j < 10; j++) { //用for循环达到重复输出文字的效果，这个for循环代表纵向循环
					ctx.beginPath();
					ctx.setFontSize(20);
					ctx.setFillStyle("rgba(169,169,169,.2)");

					ctx.fillText(name_xx, 0, 50 * j);
					for (let i = 1; i < 10; i++) { //这个for循环代表横向循环，
						ctx.beginPath();
						ctx.setFontSize(20);
						ctx.setFillStyle("rgba(169,169,169,.2)");
						ctx.fillText(name_xx, 80 * i, 50 * j);
					}
				} //两个for循环的配合，使得文字充满斜对角线的左下部分

				//对斜对角线以右部分进行文字的填充逻辑同上
				for (let j = 0; j < 10; j++) {
					ctx.beginPath();
					ctx.setFontSize(20);
					ctx.setFillStyle("rgba(169,169,169,.2)");

					ctx.fillText(name_xx, 0, -50 * j);
					for (let i = 1; i < 10; i++) {
						ctx.beginPath();
						ctx.setFontSize(20);
						ctx.setFillStyle("rgba(169,169,169,.2)");
						ctx.fillText(name_xx, 80 * i, -50 * j);
					}
				}
				
				ctx.draw();
			},
			clearWatermark() {
				var ctx = uni.createCanvasContext("myCanvas1");
				ctx.clearRect(0, 0, 300, 150); // 清除画布上的内容，这里的300和150需要根据实际画布大小调整
				ctx.draw();
			},
			/** 获取可报ing活动列表 */
			getActivityList() {
				getActivityListAPi(this.activityCategory).then((res) => {
					this.acticityData = res.data.unregisteredActivityList;
					this.ongoingActivityList = res.data.ongoingActivityList; //已报名未结束活动
					this.closedActivityList = res.data.closedActivityList; //已结束
					this.tabsChange();
				})
			},

			tabChangeClick(e) {
				if (this.tabIndex !== e.currentIndex) {
					this.tabIndex = e.currentIndex
				};
				this.tabsChange();
			},
			tabsChange() {
				let that = this;
				if (that.tabIndex == 0) {
					that.propsData = that.ongoingActivityList
				} else {
					that.propsData = that.closedActivityList
				}
			},
			openDataPopup(emitData) {
				this.showUpDatePopup = emitData.ele;
				this.drawerInd = 0;
				let activityId = emitData.id;
				getRegistrationAPi(activityId).then((res) => {
					this.ongoingProductList = res.data.ongoingProductList; //已报名未结束活动
					this.closedProductList = res.data.closedProductList; //已结束
					this.proLisChange();
				});
				this.activityId = activityId;
			},
			onClickItem(e) {
				if (this.drawerInd !== e.currentIndex) {
					this.drawerInd = e.currentIndex
				}
				this.proLisChange();
			},
			proLisChange() {
				let that = this;
				if (that.drawerInd == 0) {
					that.porductList = that.ongoingProductList;
				} else {
					that.porductList = that.closedProductList;
				}
			},
			//关闭弹窗
			closeComuleDate() {
				this.showUpDatePopup = false;
			},

			/** 活动报名--详情 */
			goActiveRegistration(item) {
				this.goPage(`/pages/marketing/activeRegistration/index?id=${item.id}`);
			},

			toActiveDetails(item) {
				this.goPage(`/pages/marketing/activeDetail/activeDetail?id=${item.id}`);
			},
			/**选择添加商品 */
			addProducts(item) {
				let activityId = item.id;
				let actType = this.activityCategory;
				this.goPage(`/pages/marketing/choosePeroduct/choosePeroduct?id=${activityId}&activityCategory=${actType}`);
			},
			changeActive() {
				this.goPage(`/pages/marketing/modifyActive/modifyActive`);
			},
			goCheckActive() {
				let actType = this.activityCategory;
				this.goPage(`/pages/marketing/checkAllActive/checkAllActive?activityType=${actType}`);
			},
			goPriceAdjust() {
				this.goPage(`/pages/marketing/priceAdjustItem/priceAdjustItem`);
			},
			toDetails(item) {
				let currentInd = this.currentInd;
				let actType = this.activityCategory;
				let enrolledActivityId  = item.enrolledActivityId;
				let activityId = this.activityId;
				let skuId = item.id;
				this.goPage(`/pages/marketing/productDetail/productDetail?type=${currentInd}`,
					(res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('productInfo', {
							activityId: activityId,
							skuId: skuId,
							enrolledActivityId :enrolledActivityId,
							type: actType,
						})
					});
			},
			goPage(url, success) {
				uni.navigateTo({
					url,
					success: success
				});
			},
		}
	}
</script>

<style lang="scss">
	.card {
		border-radius: 20rpx;
		background-color: #fff;
		margin: 20rpx 30rpx;
		padding: 28rpx;
	}

	.header-top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		align-items: center;
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #282828;
			text-align: center;
			margin: 38rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 0;
				color: #8b8c8d;
				font-size: 28rpx;
			}
		}
	}

	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}

	.content-item {
		height: 900rpx;
		margin: 20rpx;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 1000rpx;

		.scroll-view {
			height: 100%;
		}
	}

	/* 为水印添加样式，确保其覆盖整个页面 */
	.watermark {
		position: absolute;
		top: 0rpx;
		width: 100%;
		height: 100%;
		// background-repeat: repeat;
		option: 0.9;
		/* 确保水印不会影响点击事件 */
		z-index: 9999;
		/* 确保水印在最上层 */
	}
</style>